<!-- 渐进式加载图片 -->
<template>
    <div class="progressive">
        <img class="img placeholder" :src="placeholder" />
        <img @load="handleLoaded" class="img origin" :src="origin" />
    </div>
</template>
<script>
export default {
    props: {
        placeholder: {
            type: String,
        },
        origin: {
            type: String,
        }
    },
    data() {
        return {
            isPrint: false,
        }
    },
    methods: {
        handleLoaded(e) {
            const target = e.target
            if (target && target.parentElement) {
                target.parentElement.classList.add('loaded')
            }
        }
    }
}
</script>

<style scoped>
.progressive {
    position: relative;
    width: 100%;
    height: 100%;
}

.progressive.loaded .img.placeholder {
    opacity: 0;
}

.progressive.loaded .img.origin {
    opacity: 1;
}

.progressive .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition: opacity 0.3s ease-in-out; */
}

.progressive .img.origin {
    opacity: 0;
}
</style>